
/*
* author kakay 
* data 2017.7.17
* name 工作日志
*/

import React, { Component } from 'react';
import { Flex, Button, InputItem, Toast, TextareaItem, DatePicker, Picker, List } from 'antd-mobile';
import './index.scss'
import {Resource} from '../../service/resource';
import BrowserUtils from '../../service/history';
import LocalStorage from '../../service/LocalStorage';
import moment from 'moment';

/*
* 修改添加日志 
* worklog
*/

class Worklog extends Component {
  constructor(props) {
    super(props);
    this.state ={
      info: props.info || {},
      visible:false,
      optionList:[],
      sValue:"",
      sName:"",
      visiblePicker:false,
      logList:[],
      workhourValidate:false,
      dpValue: moment().locale('zh-cn').utcOffset(8)
    }
  }

  componentDidMount() {
    Resource.getProjects.get().then(res => {
      let Value, Name;
      const projectOptions = LocalStorage.getItem('projectOptions');
      if (projectOptions) {
        Value = projectOptions.sValue;
        Name = projectOptions.sName;
      } else {
        Value = [res[0].id];
        Name = res[0].name;
      }
      let arr = [];
      res.forEach((item, index) =>
        arr.push({
          label:item.name, 
          value:item.id
        })
      )
      this.setState({
        optionList: arr,
        sValue: Value,
        sName: Name,
      });
    }) 
  }


  selectProject(value) {
    const {optionList} = this.state;
    let Name="";
       optionList.forEach(item => {
          if(item.value ===value[0]) {
            Name = item.label
          }
       })
       this.setState({
        sName:Name,
        sValue:value,
        visiblePicker: false
       });
       LocalStorage.setItem('projectOptions', {sValue: value, sName: Name});
  }

  editInfo(value,type){
    const { info } = this.state;
    if(type==="logTime") info.workingHour = value > 8 ? 8 : value;
    if(type==="logContent") info.record = value;
    this.setState({info});
  }

 validataWrokHour(value){
    if(!isNaN(value)){
      this.setState({workhourValidate:false})
      
    }else{
      this.setState({workhourValidate:true})
    }
 }

  updateInfo() {
    const {info,sValue,optionList} = this.state;
    info.date = this.state.dpValue.format('YYYY-MM-DD');
    info.projectID = sValue[0];
    info.userID = JSON.parse(localStorage.getItem("user")).id;
    Resource.addRecord.post(null, info).then(res => {
      if(res && res.result === 1) {
        Toast.success('添加成功', 2);
        BrowserUtils.push({pathname: '/logList',state: {data: optionList}});
      }
    })
  }

  render() {
    const {info} = this.state;
    return (
      <Flex className="worklog" direction="column" align="start">
        <Flex className="content" direction="column" align="center">
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">项目：</Flex.Item>
            <InputItem
              className="input"
              editable={false}
              value={this.state.sName}
              placeholder="请输入项目名称"
              onClick={() => this.setState({ visiblePicker: true })}
              />
            
            <Picker
              data={this.state.optionList}
              visible={this.state.visiblePicker}
              value={this.state.sValue}
              cols={1}
              onChange={v => this.selectProject(v)}
              onDismiss={() => this.setState({ visiblePicker: false })}
              >
              <List.Item style={{display: 'none'}} />
            </Picker>
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">日期：</Flex.Item>
              <InputItem
              className="input"
              value={this.state.dpValue && this.state.dpValue.format('YYYY-MM-DD')}
              clear
              editable={false}
              placeholder="请输入日期"
              onClick={() => this.setState({ visible: true })}
              onChange={value => this.editInfo(value, 'logDate')}
              />
            <DatePicker
              visible={this.state.visible}
              mode="date"
              title={<span onClick={() => this.setState({ visible: false })}>点击可以关闭</span>}
              extra="请选择(可选)"
              onOk={() => console.log(this.state.dpValue)}
              onDismiss={() => this.setState({ visible: false })}
              value={this.state.dpValue}
              onChange={v => this.setState({ dpValue: v, visible: false })}
            />
          
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">工时：</Flex.Item>
            <InputItem
              className="input"
              value={info.workingHour}
              clear
              type="number"
              placeholder="请输入工时(单位小时)"
              onChange={value => this.editInfo(value, 'logTime')}
            />
          </Flex>
          <Flex className="inputItem" justify="between">
            <Flex.Item className="label">日志：</Flex.Item>
            <TextareaItem
              className="input"
              rows={4}
              value={info.record}
              placeholder="请输入日志"
              onChange={value => this.editInfo(value, 'logContent')}
            />
          </Flex>
          <Flex className="inputItem" justify="around">
            <Button className="btn" type="primary" disabled={this.state.workhourValidate} onTouchTap={() => this.updateInfo()}>提交</Button>
          </Flex>
        </Flex>
      </Flex>
    );
  }
}

export default Worklog;